<!--
 * @Author: your name
 * @Date: 2021-07-08 12:46:10
 * @LastEditTime: 2021-12-17 16:25:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jinfeng_up\src\pages\systemSetting\column.vue
-->
<template>
    <div class="all">
        <div class="container">
            <div class="containerTop">
                <div class="containerTopName">
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <div class="grid-content bg-purple">配置设置</div>
                        </el-col>
                        <el-col
                            :span="14"
                            v-if="!isOpen && !isValue && !isMandatory"
                        >
                            <div class="grid-content bg-purple">一级选项</div>
                        </el-col>
                        <el-col
                            :span="6"
                            v-if="isOpen || isValue || isMandatory"
                        >
                            <div class="grid-content bg-purple">一级选项</div>
                        </el-col>
                        <!-- <el-col :span="9" v-if="!isOpen && isValue">
              <div class="grid-content bg-purple">一级选项</div>
            </el-col> -->
                        <el-col
                            :span="3"
                            v-if="isOpen && !isMandatory && !isValue"
                        >
                            <div class="grid-content bg-purple">
                                <span>是否开启C2</span>
                            </div>
                        </el-col>
                        <el-col
                            :span="5"
                            v-if="isOpen && !isValue && !isMandatory"
                        >
                            <div class="grid-content bg-purple">
                                <span>二级选项</span>
                            </div>
                        </el-col>
                        <el-col
                            :span="8"
                            v-if="!isOpen && isValue && !isMandatory"
                        >
                            <div class="grid-content bg-purple">
                                <span>二级选项</span>
                            </div>
                        </el-col>
                        <el-col
                            :span="8"
                            v-if="!isOpen && isMandatory && !isValue"
                        >
                            <div class="grid-content bg-purple">
                                <span>是否开启必填</span>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div class="grid-content bg-purple">
                                <!-- <DataRefresh class="dataStatisticsButton" /> -->
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="addData">
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <div class="grid-content bg-purple">
                                <el-select
                                    v-model="value"
                                    placeholder="请选择"
                                    :disabled="isInput"
                                    clearable
                                >
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </div>
                        </el-col>
                        <el-col
                            :span="14"
                            v-if="!isOpen && !isValue && !isMandatory"
                        >
                            <div class="grid-content bg-purple">
                                <el-input
                                    v-model="configurationInput"
                                    :disabled="isInput"
                                    placeholder="请输入内容"
                                    class="maxInput"
                                ></el-input>
                            </div>
                        </el-col>
                        <el-col
                            :span="5"
                            v-if="isOpen || isValue || isMandatory"
                        >
                            <div class="grid-content bg-purple">
                                <el-input
                                    v-model="configurationInput"
                                    :disabled="isInput"
                                    placeholder="请输入内容"
                                ></el-input>
                            </div>
                        </el-col>
                        <el-col
                            :span="3"
                            :offset="1"
                            v-if="isOpen && !isMandatory && !isValue"
                        >
                            <div class="grid-content bg-purple">
                                <el-radio
                                    v-model="radio"
                                    label="1"
                                    :disabled="isInput"
                                    v-if="isOpen && !isMandatory && !isValue"
                                    >否</el-radio
                                >
                                <el-radio
                                    v-model="radio"
                                    label="2"
                                    :disabled="isInput"
                                    v-if="isOpen && !isMandatory && !isValue"
                                    >是</el-radio
                                >
                            </div>
                        </el-col>
                        <el-col
                            :span="5"
                            :offset="value == '0' ? 1 : 0"
                            v-if="isOpen && !isValue && !isMandatory"
                        >
                            <div class="grid-content bg-purple">
                                <el-input
                                    v-model="levelTwoInput"
                                    :disabled="isInput"
                                    placeholder="请输入内容"
                                ></el-input>
                            </div>
                        </el-col>
                        <el-col
                            :span="8"
                            :offset="value == '0' ? 1 : 0"
                            v-if="!isOpen && isValue && !isMandatory"
                        >
                            <div class="grid-content bg-purple">
                                <el-input
                                    v-model="levelTwoInput"
                                    :disabled="isInput"
                                    placeholder="请输入内容"
                                ></el-input>
                            </div>
                        </el-col>
                        <el-col
                            :span="8"
                            :offset="1"
                            v-if="!isOpen && isMandatory && !isValue"
                        >
                            <div class="grid-content bg-purple">
                                <el-radio
                                    v-model="radio"
                                    label="1"
                                    :disabled="isInput"
                                    v-if="!isOpen && isMandatory && !isValue"
                                    >否</el-radio
                                >
                                <el-radio
                                    v-model="radio"
                                    label="2"
                                    :disabled="isInput"
                                    v-if="!isOpen && isMandatory && !isValue"
                                    >是</el-radio
                                >
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div class="grid-content bg-purple">
                                <div v-if="isEidt">
                                    <el-button
                                        type="primary"
                                        @click.stop="setEidtFalse"
                                        class="buttonStyle"
                                        >编辑</el-button
                                    >
                                    <el-button
                                        type="primary"
                                        @click.stop="insertAsyn"
                                        class="buttonStyle"
                                        >添加</el-button
                                    >
                                </div>
                                <div v-else>
                                    <el-button
                                        type="primary"
                                        @click.stop="setEidtTrue"
                                        class="buttonStyle"
                                        >保存</el-button
                                    >
                                    <el-button
                                        type="primary"
                                        @click.stop="cancelAsyn"
                                        class="buttonStyle"
                                        >取消</el-button
                                    >
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="containerButtom">
                <div class="containerButtomList">
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <div class="grid-content bg-purple">
                                <div class="containerButtomListText">
                                    <p>问题类型</p>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="containerButtomListOne">
                                <div class="childernDivs">
                                    <div>
                                        <el-row :gutter="5">
                                            <el-col :span="16"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    名称
                                                </div></el-col
                                            >
                                            <el-col :span="5"

                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    排序
                                                </div></el-col
                                            >
                                            <!-- <el-col :span="3"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    操作
                                                </div></el-col
                                            > -->
                                        </el-row>
                                    </div>
                                </div>
                                <div class="containerListChildern">
                                    <div
                                        @click.stop="closeCatlogChnage(item)"
                                        v-for="(item, index) in MarketProject"
                                        :key="index"
                                        class="childernDiv"
                                    >
                                        <div>
                                            <el-row :gutter="5">
                                                <el-col :span="16"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                            :disabled="isEidt"
                                                            v-model="item.name"
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="5"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                            oninput="value=value.replace(/[^\d]/g,'').slice(0,3)"
                                                            :disabled="isEidt"
                                                            v-model="item.orderByNum"
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="3"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <span
                                                            class="
                                                                el-icon-circle-close
                                                            "
                                                            v-if="
                                                                isEidt === false
                                                            "
                                                            @click.stop="
                                                                clickDelete(
                                                                    index,
                                                                    'MarketProject'
                                                                )
                                                            "
                                                        ></span></div
                                                ></el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8" :offset="value == '25' ? 3 : 0">
                            <div class="containerButtomListOne">
                                <div class="childernDivs">
                                    <div>
                                        <el-row :gutter="5">
                                            <el-col :span="16"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    名称
                                                </div></el-col
                                            >
                                            <el-col :span="5"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    排序
                                                </div></el-col
                                            >
                                            <!-- <el-col :span="3"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    操作
                                                </div></el-col
                                            > -->
                                        </el-row>
                                    </div>
                                </div>
                            <div class="containerListChildern">
                                    <div
                                        v-for="(
                                            item, index
                                        ) in MarketProjectChilds"
                                        :key="index"
                                        class="childernDiv"
                                    >
                                        <div>
                                            <el-row :gutter="5">
                                                <el-col :span="16"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                            :disabled="isEidt"
                                                            v-model="item.name"
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="5"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                            oninput="value=value.replace(/[^\d]/g,'').slice(0,3)"
                                                            :disabled="isEidt"
                                                            v-model="item.orderByNum"
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="3"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <span
                                                            class="
                                                                el-icon-circle-close
                                                            "
                                                            v-if="
                                                                isEidt === false
                                                            "
                                                            @click.stop="
                                                                clickDelete(
                                                                    index,
                                                                    'MarketProjectChilds'
                                                                )
                                                            "
                                                        ></span></div
                                                ></el-col>
                                            </el-row>
                                        </div>
                                    </div>
                            </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="containerButtomList">
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <div class="grid-content bg-purple">
                                <div class="containerButtomListText">
                                    <p>反馈来源</p>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="containerButtomListOne">
                                <div class="childernDivs">
                                    <div>
                                        <el-row :gutter="5">
                                            <el-col :span="16"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    名称
                                                </div></el-col
                                            >
                                            <el-col :span="5"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    排序
                                                </div></el-col
                                            >
                                            <!-- <el-col :span="3"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    操作
                                                </div></el-col
                                            > -->
                                        </el-row>
                                    </div>
                                </div>
                                <div class="containerListChildern">
                                    <div
                                        v-for="(
                                            item, index
                                        ) in SourceFeedbackSets"
                                        :key="index"
                                        class="childernDiv"
                                    >
                                        <div>
                                            <el-row :gutter="5">
                                                <el-col :span="16"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                            :disabled="isEidt"
                                                            v-model="item.title"
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="5"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                            oninput="value=value.replace(/[^\d]/g,'').slice(0,3)"
                                                            :disabled="isEidt"
                                                            v-model="item.orderByNum"
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="3"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <span
                                                            class="
                                                                el-icon-circle-close
                                                            "
                                                            v-if="
                                                                isEidt === false
                                                            "
                                                            @click.stop="
                                                                clickDelete(
                                                                    index,
                                                                    'SourceFeedbackSets'
                                                                )
                                                            "
                                                        ></span></div
                                                ></el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="containerButtomList">
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <div class="grid-content bg-purple">
                                <div class="containerButtomListText">
                                    <p>营销项目状态</p>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="containerButtomListOne">
                                <div class="childernDivs">
                                    <div>
                                        <el-row :gutter="5">
                                            <el-col :span="16"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    名称
                                                </div></el-col
                                            >
                                            <el-col :span="5"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    排序
                                                </div></el-col
                                            >
                                            <!-- <el-col :span="3"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    操作
                                                </div></el-col
                                            > -->
                                        </el-row>
                                    </div>
                                </div>
                                <div class="containerListChildern">
                                    <div
                                        v-for="(item, index) in ProblemTypeSets"
                                        :key="index"
                                        class="childernDiv"
                                    >
                                        <div>
                                            <el-row :gutter="5">
                                                <el-col :span="16"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                            :disabled="isEidt"
                                                            v-model="item.title"
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="5"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                            oninput="value=value.replace(/[^\d]/g,'').slice(0,3)"
                                                            :disabled="isEidt"
                                                            v-model="item.orderByNum"
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="3"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <span
                                                            class="
                                                                el-icon-circle-close
                                                            "
                                                            v-if="
                                                                isEidt === false
                                                            "
                                                            @click.stop="
                                                                clickDelete(
                                                                    index,
                                                                    'ProblemTypeSets'
                                                                )
                                                            "
                                                        ></span></div
                                                ></el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="containerButtomList">
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <div class="grid-content bg-purple">
                                <div class="containerButtomListText">
                                    <p>
                                        影响类别设置
                                        <el-tooltip
                                            class="item"
                                            effect="dark"
                                            content="是：反馈表单填写,触发影响描述必填项<br>否：反馈表单填写,不触发影响描述必填项"
                                            placement="top"
                                            ><div slot="content">
                                                是：反馈表单填写,触发影响描述必填项<br />否：反馈表单填写,不触发影响描述必填项
                                            </div>
                                            <span
                                                class="el-icon-question"
                                            ></span
                                        ></el-tooltip>
                                    </p>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="containerButtomListOne">
                                <div class="childernDivs">
                                    <div>
                                        <el-row :gutter="5">
                                            <el-col :span="10"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    名称
                                                </div></el-col
                                            >
                                            <el-col :span="4"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    排序
                                                </div></el-col
                                            >
                                            <el-col :span="6"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    是否开启必填
                                                </div></el-col
                                            >
                                            <el-col :span="3"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    操作
                                                </div></el-col
                                            >
                                        </el-row>
                                    </div>
                                </div>
                                <div class="containerListChildern">
                                    <div
                                        v-for="(
                                            item, index
                                        ) in impactCategorySets"
                                        :key="index"
                                        class="childernDiv"
                                    >
                                        <div>
                                            <el-row :gutter="5">
                                                <el-col :span="10"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                            :disabled="isEidt"
                                                            v-model="item.title"
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="4"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                            oninput="value=value.replace(/[^\d]/g,'').slice(0,3)"
                                                            :disabled="isEidt"
                                                            v-model="item.orderByNum"
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="8">
                                                    <div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-radio-group
                                                            v-model="
                                                                item.requiredTag
                                                            "
                                                            :disabled="isEidt"
                                                        >
                                                            <el-radio
                                                                :label="false"
                                                                style="
                                                                    margin-left: 10px;
                                                                "
                                                                >否</el-radio
                                                            >
                                                            <el-radio
                                                                :label="true"
                                                                >是</el-radio
                                                            >
                                                        </el-radio-group>
                                                    </div>
                                                </el-col>
                                                <el-col :span="2"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <span
                                                            class="
                                                                el-icon-circle-close
                                                            "
                                                            v-if="
                                                                isEidt === false
                                                            "
                                                            @click.stop="
                                                                clickDelete(
                                                                    index,
                                                                    'impactCategorySets'
                                                                )
                                                            "
                                                        ></span></div
                                                ></el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="containerButtomList">
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <div class="grid-content bg-purple">
                                <div class="containerButtomListText">
                                    <p>任务关闭原因</p>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="containerButtomListOne">
                                <div class="childernDivs">
                                    <div>
                                        <el-row :gutter="5">
                                            <el-col :span="16"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    名称
                                                </div></el-col
                                            >
                                            <el-col :span="5"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    排序
                                                </div></el-col
                                            >
                                            <!-- <el-col :span="3"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    操作
                                                </div></el-col
                                            > -->
                                        </el-row>
                                    </div>
                                </div>
                                <div class="containerListChildern">
                                    <div
                                        v-for="(item, index) in taskCloseReason"
                                        :key="index"
                                        class="childernDiv"
                                    >
                                        <div>
                                            <el-row :gutter="5">
                                                <el-col :span="16"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                            :disabled="isEidt"
                                                            v-model="item.title"
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="5"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                            oninput="value=value.replace(/[^\d]/g,'').slice(0,3)"
                                                            :disabled="isEidt"
                                                            v-model="item.orderByNum"
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="3"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <span
                                                            class="
                                                                el-icon-circle-close
                                                            "
                                                            v-if="
                                                                isEidt === false
                                                            "
                                                            @click.stop="
                                                                clickDelete(
                                                                    index,
                                                                    'taskCloseReason'
                                                                )
                                                            "
                                                        ></span></div
                                                ></el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="containerButtomList">
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <div class="grid-content bg-purple">
                                <div class="containerButtomListText">
                                    <p>
                                        反馈关闭原因
                                        <el-tooltip
                                            class="item"
                                            effect="dark"
                                            content="是：反馈关闭时触发C2任务状态<br>否：反馈关闭时不触发C2任务状态"
                                            placement="top"
                                            ><div slot="content">
                                                是：反馈关闭时触发C2任务状态<br />否：反馈关闭时不触发C2任务状态
                                            </div>
                                            <span
                                                class="el-icon-question"
                                            ></span
                                        ></el-tooltip>
                                    </p>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="containerButtomListOne">
                                <div class="childernDivs">
                                    <div>
                                        <el-row :gutter="5">
                                            <el-col :span="16"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    名称
                                                </div></el-col
                                            >
                                            <el-col :span="5"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    排序
                                                </div></el-col
                                            >
                                            <!-- <el-col :span="3"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    操作
                                                </div></el-col
                                            > -->
                                        </el-row>
                                    </div>
                                </div>
                                <div class="containerListChildern">
                                    <div
                                        v-for="(
                                            item, index
                                        ) in feedBackCloseSet"
                                        :key="index"
                                        @click.stop="
                                            clickFeedBackCloseSet(index)
                                        "
                                        class="childernDiv"
                                    >
                                        <div>
                                            <el-row :gutter="5">
                                                <el-col :span="16"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                            :disabled="isEidt"
                                                            v-model="item.text"
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="5"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                         oninput="value=value.replace(/[^\d]/g,'').slice(0,3)"
                                                            :disabled="isEidt"
                                                            v-model="item.orderByNum"
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="3"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <span
                                                            class="
                                                                el-icon-circle-close
                                                            "
                                                            v-if="
                                                                isEidt ===
                                                                    false &&
                                                                item.id !=
                                                                    '1437596313747296257' &&
                                                                item.id !=
                                                                    '1437596752060452866'
                                                            "
                                                            @click.stop="
                                                                clickDelete(
                                                                    index,
                                                                    'feedBackCloseSet'
                                                                )
                                                            "
                                                        ></span></div
                                                ></el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="3">
                            <div class="grid-content bg-purple">
                                <el-radio-group
                                    v-model="isradio"
                                    :disabled="isEidt"
                                    @change="onChang()"
                                >
                                    <el-radio
                                        label="false"
                                        style="margin-left: 10px"
                                        >否</el-radio
                                    >
                                    <el-radio label="true">是</el-radio>
                                </el-radio-group>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="containerButtomListOne">
                                <div class="childernDivs">
                                    <div>
                                        <el-row :gutter="5">
                                            <el-col :span="16"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    名称
                                                </div></el-col
                                            >
                                            <el-col :span="5"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    排序
                                                </div></el-col
                                            >
                                            <!-- <el-col :span="3"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    操作
                                                </div></el-col
                                            > -->
                                        </el-row>
                                    </div>
                                </div>
                                <div class="containerListChildern">
                                    <div
                                        v-for="(
                                            item, index
                                        ) in feedBackCloseSetChilds"
                                        :key="index"
                                        class="childernDiv"
                                    >
                                        <div>
                                            <el-row :gutter="5">
                                                <el-col :span="16"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                            :disabled="isEidt"
                                                            v-model="item.text"
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="5"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                         oninput="value=value.replace(/[^\d]/g,'').slice(0,3)"
                                                            :disabled="isEidt"
                                                            v-model="item.orderByNum"
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="3"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <span
                                                            class="
                                                                el-icon-circle-close
                                                            "
                                                            v-if="
                                                                isEidt ===
                                                                    false &&
                                                                item.id !=
                                                                    '1453204872799293442' &&
                                                                item.id !=
                                                                    '1465984440127819777'
                                                            "
                                                            @click.stop="
                                                                clickDelete(
                                                                    index,
                                                                    'feedBackCloseSetChilds'
                                                                )
                                                            "
                                                        ></span></div
                                                ></el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="containerButtomList">
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <div class="grid-content bg-purple">
                                <div class="containerButtomListText">
                                    <p>营销项目名称</p>
                                    <div class="importAndExport">
                                        <div>
                                            <el-button
                                                type="primary"
                                                @click="onExport"
                                                class="buttonStyle"
                                                >导出</el-button
                                            >
                                        </div>
                                        <div>
                                            <el-upload
                                                class="upload-demo"
                                                :action="fileUpload"
                                                :on-success="onFileSuccess"
                                                :on-error="onFileError"
                                                :headers="importHeaders"
                                                :on-remove="onFileRemove"
                                                :before-upload="beforeUpload"
                                                multiple
                                                :limit="3"
                                                :file-list="fileList"
                                            >
                                                <el-button
                                                    size="small"
                                                    type="primary"
                                                    class="buttonStyle"
                                                    >导入</el-button
                                                >
                                            </el-upload>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="containerButtomListOne">
                                <div class="childernDivs">
                                    <div>
                                        <el-row :gutter="5">
                                            <el-col :span="16"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    名称
                                                </div></el-col
                                            >
                                            <el-col :span="5"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    排序
                                                </div></el-col
                                            >
                                            <!-- <el-col :span="3"
                                                ><div
                                                    class="
                                                        grid-content
                                                        bg-purple
                                                    "
                                                >
                                                    操作
                                                </div></el-col
                                            > -->
                                        </el-row>
                                    </div>
                                </div>
                                <div class="containerListChildern">
                                    <div
                                        v-for="(
                                            item, index
                                        ) in marketProjectName"
                                        :key="index"
                                        class="childernDiv"
                                    >
                                        <div>
                                            <el-row :gutter="5">
                                                <el-col :span="16"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                            :disabled="isEidt"
                                                            v-model="item.title"
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="5"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <el-input
                                                             oninput="value=value.replace(/[^\d]/g,'').slice(0,3)"
                                                            :disabled="isEidt"
                                                            v-model="item.orderByNum"
                                                        ></el-input></div
                                                ></el-col>
                                                <el-col :span="3"
                                                    ><div
                                                        class="
                                                            grid-content
                                                            bg-purple
                                                        "
                                                    >
                                                        <span
                                                            class="
                                                                el-icon-circle-close
                                                            "
                                                            v-if="
                                                                isEidt === false
                                                            "
                                                            @click.stop="
                                                                clickDelete(
                                                                    index,
                                                                    'marketProjectName'
                                                                )
                                                            "
                                                        ></span></div
                                                ></el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <CommonDialog ref="CommonDialog" />
            <el-dialog
                title="数据导入"
                :visible.sync="isShowDialog"
                :close-on-click-modal="false"
                width="25%"
            >
                <el-table
                    ref="multipleTable"
                    :data="gridData"
                    tooltip-effect="dark"
                    style="width: 100%; height: 430px; overflow-y: auto"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column label="营销项目名称">
                        <template slot-scope="scope">{{
                            scope.row.marketProjectName
                        }}</template>
                    </el-table-column>
                </el-table>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="isShowDialog = false">取 消</el-button>
                    <el-button type="primary" @click="onImport">导入</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import Api from '@/api/setting/api.js'
import CommonDialog from '@/components/deleteDialog/deleteDialog.vue'
import { FormOptionSet } from '@/api/setting/service.js'
// import DataRefresh from './dataRefresh.vue'
export default {
    name: 'marketingProStatus',
    components: {
        CommonDialog
        // DataRefresh
    },
    data() {
        var mytoken = JSON.parse(sessionStorage.getItem('USERINFO')).token // 要保证取到
        return {
            // 配置选项绑定的value值
            isInput: false,
            value: '',
            isMandatory: false,
            // 数据导入成功弹出框
            isShowDialog: false,
            importHeaders: { token: mytoken },
            // 文件上传地址
            fileUpload: `${process.env.VUE_APP_BASE_API}${Api.FormOptionSetMarketingProjectParse}`,
            // 从本地选择文件成功的数据
            gridData: [],
            // 配置设置选项
            options: [
                {
                    value: '0',
                    label: '问题类型'
                },
                // {
                //     value: '5',
                //     label: '问题小类'
                // },
                {
                    value: '10',
                    label: '反馈来源'
                },
                {
                    value: '15',
                    label: '营销项目状态'
                },
                {
                    value: '20',
                    label: '影响类别设置'
                },
                {
                    value: '25',
                    label: '反馈关闭原因'
                },
                {
                    value: '30',
                    label: '任务关闭原因'
                },
                {
                    value: '35',
                    label: '营销项目名称'
                }
            ],
            // 绑定配置设置输入框
            configurationInput: '',
            // 绑定一级选项输入框
            levelOneInput: '',
            // 绑定二级选项输入框
            levelTwoInput: '',
            // 默认开启C2
            radio: '1',
            // 反馈关闭原因中是否开启C2
            isradio: 'false',
            // 反馈关闭原因一级选项索引值
            radioIndex: 0,
            // 判断是否是问题类型
            isValue: false,
            // 判断是否判断是否是反馈关闭原因
            isOpen: false,
            // 判断是否可以编辑
            isEidt: true,
            // 问题类型一级列表数据
            MarketProject: [],
            // 问题类型二级列表数据
            MarketProjectChilds: [],
            // 反馈来源列表数据
            SourceFeedbackSets: [],
            // 营销项目状态列表数据
            ProblemTypeSets: [],
            // 影响类别设置列表数据
            impactCategorySets: [],
            // 反馈关闭原因一级列表数据
            feedBackCloseSet: [],
            // 任务关闭原因列表数据
            taskCloseReason: [],
            // 反馈关闭原因二级列表数据
            feedBackCloseSetChilds: [],
            // 营销项目名称列表数据
            marketProjectName: [],
            // 需要导入的文件
            multipleTable: [],
            // 文件上传列表
            fileList: [],
            // 问题小类列表
            marketProjectsSmall: []

        }
    },
    watch: {
        /**
         * @description: 监听配置选项 判断是否渲染二级选项或者是否渲染单选设置
         * @param {Number} newName 配置选项的value值
         */
        value(newName, oldName) {
            if (newName !== oldName) {
                this.levelTwoInput = ''
                this.configurationInput = ''
            }
            if (newName === '0') {
                this.isOpen = false
                this.isValue = true
                this.isMandatory = false
            } else if (newName === '25') {
                this.isOpen = true
                this.isValue = false
                this.isMandatory = false
            } else if (newName === '20') {
                this.isOpen = false
                this.isValue = false
                this.isMandatory = true
            } else {
                this.isValue = false
                this.isOpen = false
                this.isMandatory = false
            }
        }
    },
    mounted() {
        this.getCategory()
    },
    methods: {
        closeCatlogChnage(index) {
            console.log(index)
            this.MarketProjectChilds = index.children
            this.radioIndex = index
        },
        /**
     * @description: 文件上传之前判断文件大小
     * @param {Object} _file 需要上传的文件
     */
        beforeUpload(_file) {
            // 单位字节
            const limitSize = 50 * 1024 * 1024
            if (_file.size > limitSize) {
                this.$message.error('上传文件大小超出50M')
                return false
            }
            return true
        },

        /**
     * @description: 文件上传成功事件
     * @param {Object} _response 上传成功的返回结果
     * @param {Object} _file 上传的文件
     * @param {Array} _fileList 文件列表
     */
        onFileSuccess(_response, _file, _fileList) {
            console.log(_response, _file, _fileList)
            if (_response.success) {
                this.gridData = _response.data
                this.isShowDialog = true
                this.fileList = []
            } else {
                this.fileList = []
                this.$message.error(_response.message || '上传失败')
            }
        },

        /**
     * @description: 文件上传失败事件
     */
        onFileError() {
            this.$message.error('上传失败')
        },

        /**
     * @description: 文件移除事件
     * @param {Object} _file 移除的文件
     * @param {Array} _fileList 剩余的文件列表
     * @return {*}
     */
        onFileRemove(_file, _fileList) {
            console.log(_file, _fileList)
        },

        /**
     * @description: 文件导入事件
     */
        async onImport() {
            try {
                const result = await FormOptionSet.FormOptionSetMarketingProjectImport(this.multipleTable)
                if (result.success) {
                    this.isShowDialog = false
                    this.getCategory()
                    this.$message.success(result.message)
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$message.error('服务器异常')
            }
        },

        /**
     * @description: 文件导出事件
     */
        onExport() {
            FormOptionSet.FormOptionSetMarketingProjectExport()
        },

        /**
     * @description: 需要导出的文件
     * @param {Array} _val 所勾选的需要导出的文件
     */
        handleSelectionChange(_val) {
            this.multipleTable = _val
        },
        cancelAsyn() {
            this.isEidt = true
            this.isInput = false
            this.getCategory()
        },

        /**
     * @description: 异步编辑表单选项列表
     */
        async setEidtTrue() {
            const loading = this.$loading({
                lock: true,
                text: '数据加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            const arr = {
                feedBackCloseSet: this.feedBackCloseSet,
                impactCategorySets: this.impactCategorySets,
                marketProjectName: this.marketProjectName,
                marketProjects: this.MarketProject,
                problemTypeSets: this.ProblemTypeSets,
                sourceFeedbackSets: this.SourceFeedbackSets,
                taskCloseReason: this.taskCloseReason,
                marketProjectsSmall: this.marketProjectsSmall
            }
            try {
                const result = await FormOptionSet.FormOptionSetSaveAsync(arr)
                if (result.success) {
                    this.isEidt = true
                    this.isInput = false
                    loading.close()
                    this.getCategory()
                    this.$message.success(result.message)
                } else {
                    this.getCategory()
                    loading.close()
                    this.isInput = false
                    this.isEidt = true
                    this.$message.error(result.message)
                }
            } catch (err) {
                loading.close()
                this.isInput = false
                this.getCategory()
                this.isEidt = true
                this.$message.error('服务器异常')
            }
        },
        /**
     * @description: 点击编辑按钮
     */

        setEidtFalse() {
            this.isEidt = false
            this.isInput = true
        },

        /**
     * @description: 修改是否开启C2
     */
        onChang() {
            this.feedBackCloseSet[this.radioIndex].val = this.isradio
        },

        /**
     * @description: 异步获取表单选项列表
     */
        async getCategory() {
            try {
                const result = await FormOptionSet.FormOptionSetGetAllAsync()
                if (result.success) {
                    this.buildTemplateData(result.data)
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                this.$message.error('服务器异常')
            }
        },
        /**
     * @description:将后端返回的数据进行重构
     * @param {Array} _data 后端返回的数据
     */
        buildTemplateData(_data) {
            this.feedBackCloseSet = _data.feedBackCloseSet
            if (_data.feedBackCloseSet.length != 0) {
                this.feedBackCloseSetChilds = _data.feedBackCloseSet[0].children
                this.isradio = _data.feedBackCloseSet[0].val
                this.radioIndex = 0
            }
            this.impactCategorySets = _data.impactCategorySets
            this.marketProjectName = _data.marketProjectName
            this.MarketProject = _data.marketProjects
            if (_data.marketProjects.length != 0) {
                if (_data.marketProjects[0].children) {
                    this.MarketProjectChilds = _data.marketProjects[0].children
                }
            }

            this.marketProjectsSmall = _data.marketProjectsSmall
            this.ProblemTypeSets = _data.problemTypeSets
            this.SourceFeedbackSets = _data.sourceFeedbackSets
            this.taskCloseReason = _data.taskCloseReason
        },

        /**
     * @description:点击反馈关闭原因某一个 显示他的二级选项
     * @param {Number} index 反馈关闭原因中一级选项的索引
     */
        clickFeedBackCloseSet(index) {
            this.feedBackCloseSetChilds = this.feedBackCloseSet[index].children
            this.isradio = this.feedBackCloseSet[index].val
            this.radioIndex = index
        },

        /**
     * @description:异步添加自定义设置
     */
        async insertAsyn() {
            let arr = {}
            if (this.value === '') {
                this.$message.error('未选择配置选项')
            } else if (this.configurationInput === '') {
                this.$message.error('未填写一级选项')
            } else if ((this.levelTwoInput === '' || this.configurationInput === '') && (this.value === '0' || this.value === '25')) {
                this.$message.error('未填写一级或二级选项')
            } else {
                if (this.value === '0') {
                    arr = {
                        firstStatus: {
                            marketProjectType: '0',
                            name: this.configurationInput
                        },
                        optionType: '0',
                        secondStatus: {
                            marketProjectType: '1',
                            name: this.levelTwoInput
                        }
                    }
                } else if (this.value === '5') {
                    arr = {
                        firstStatus: {
                            marketProjectType: '0',
                            name: this.configurationInput
                        },
                        optionType: '7',
                        secondStatus: null
                    }
                } else if (this.value === '10') {
                    arr = {
                        firstStatus: {
                            marketProjectType: '0',
                            name: this.configurationInput
                        },
                        optionType: '1',
                        secondStatus: null
                    }
                } else if (this.value === '15') {
                    arr = {
                        firstStatus: {
                            marketProjectType: '0',
                            name: this.configurationInput
                        },
                        optionType: '2',
                        secondStatus: null
                    }
                } else if (this.value === '20') {
                    let RunC2
                    if (this.radio === '1') {
                        RunC2 = false
                    } else {
                        RunC2 = true
                    }
                    arr = {
                        firstStatus: {
                            marketProjectType: '0',
                            name: this.configurationInput,
                            runC2Tag: RunC2
                        },
                        optionType: '3',
                        secondStatus: null
                    }
                } else if (this.value === '30') {
                    arr = {
                        firstStatus: {
                            marketProjectType: '0',
                            name: this.configurationInput
                        },
                        optionType: '5',
                        secondStatus: null
                    }
                } else if (this.value === '25') {
                    let RunC2
                    if (this.radio === '1') {
                        RunC2 = false
                    } else {
                        RunC2 = true
                    }
                    if (this.levelTwoInput != '') {
                        arr = {
                            firstStatus: {
                                marketProjectType: '0',
                                name: this.configurationInput,
                                runC2Tag: RunC2
                            },
                            optionType: '4',
                            secondStatus: {
                                marketProjectType: '1',
                                name: this.levelTwoInput,
                                runC2Tag: RunC2
                            }
                        }
                    } else {
                        arr = {
                            firstStatus: {
                                marketProjectType: '0',
                                name: this.configurationInput,
                                runC2Tag: RunC2
                            },
                            optionType: '4',
                            secondStatus: null
                        }
                    }
                } else if (this.value === '35') {
                    arr = {
                        firstStatus: {
                            name: this.configurationInput
                        },
                        optionType: '6'
                    }
                }
                try {
                    const result = await FormOptionSet.FormOptionSetInsertAsync(arr)
                    if (result.success) {
                        this.configurationInput = ''
                        this.levelOneInput = ''
                        this.levelTwoInput = ''
                        this.radio = '1'
                        this.getCategory()
                        this.$message.success(result.message)
                    } else {
                        this.$message.error(result.message)
                    }
                } catch (err) {
                    this.$message.error('服务器异常')
                }
            }
        },

        /**
     * @description:删除一条数据
     * @param {Number} _index 确定删除的是那一条
     * @param {String} _type 确定删除的是那一条数据里面
     */
        async clickDelete(_index, _type) {
            if (_type === 'MarketProject') {
                if (this.MarketProject.length > 1) {
                    this[_type].splice(_index, 1)
                    console.log(this.MarketProject)
                    this.MarketProjectChilds = this.MarketProject[0].children
                } else {
                    this[_type].splice(_index, 1)
                    this.MarketProjectChilds = []
                }
            } else if (_type === 'feedBackCloseSet') {
                if (this.feedBackCloseSet.length > 1) {
                    this[_type].splice(_index, 1)
                    this.feedBackCloseSetChilds = this.feedBackCloseSet[0].children
                } else {
                    this[_type].splice(_index, 1)
                    this.feedBackCloseSetChilds = []
                }
            } else {
                this[_type].splice(_index, 1)
            }
        }
    }
}
</script>
<style lang="less" scoped src="@/assets/style/setting.less"></style>
<style lang="less" scoped>
.container {
    margin: 30px;
    background: #ffffff;
    border: 1px solid #dcdfe4;
    box-shadow: 0px 2px 5px 0px rgba(152, 160, 179, 0.2);
    border-radius: 5px;
    padding: 30px;
    .containerTop {
        padding: 10px 30px;
        position: sticky;
        background-color: #ffffff;
        border-bottom: 1px solid #c8cdd5;
        z-index: 1;
        top: 0;
        .containerTopName {
            height: 40px;
            border-bottom: 1px solid #c8cdd5;
            p {
                display: inline-block;
            }
            .dataStatisticsButton {
                float: right;
                margin-right: 10px;
            }
        }
        .addData {
            line-height: 50px;
            padding: 10px 0;
        }
    }
    .containerButtom {
        padding: 10px 0;
        .containerButtomList {
            min-height: 230px;
            padding: 10px 30px;
            position: relative;
            border-bottom: 1px solid #c8cdd5;
            .containerButtomListText {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                span {
                    color: #6bb6f3;
                }
            }
            .el-input {
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            span:hover {
                cursor: pointer;
            }
            .childernDivs {
                height: 30px;
                overflow: hidden;
                text-align: center;
                padding: 10px 5px;
                font-size: 10px;
            }
            .containerListChildern {
                height: 160px;
                overflow-y: auto;
                padding: 10px 5px;
            }
            .containerButtomListOne {
                border: 1px solid rgb(228, 228, 228);
                width: 100%;
            }
            .containerButtomListTwo {
                border: 1px solid rgb(228, 228, 228);
                width: 100%;
                max-width: 320px;
                height: 160px;
                padding: 10px 5px;
                overflow-y: auto;
            }
            .containerButtomListThree {
                border: 1px solid rgb(228, 228, 228);
                width: 100%;
                max-width: 320px;
                height: 160px;
                padding: 10px 5px;
                overflow-y: auto;
            }
            .containerButtomListFour {
                border: 1px solid rgb(228, 228, 228);
                width: 100%;
                max-width: 450px;
                height: 160px;
                padding: 10px 5px;
                overflow-y: auto;
            }
        }
    }
}
.importAndExport {
    margin-top: 85px;
    div {
        width: 80px;
        float: left;
    }
}
.buttonStyle {
    width: 70px;
    height: 30px;
    background: #eaf2ff;
    border: 1px solid #3579e0;
    border-radius: 5px;
    color: #3579e0;
    line-height: 8px;
}
.el-input {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.el-button {
    float: right;
    margin-right: 10px;
    margin-top: 10px;
}
::v-deep .el-dialog__footer {
    height: 60px !important;
}
::v-deep .el-select--small {
    height: 55px;
}
.maxInput {
    max-width: 320px;
}
.containerButtomListText p:hover i,
.containerButtomListText p:hover span {
    color: #5cb6ff;
}
.el-radio-group {
    white-space: nowrap;
}
.el-icon-circle-close {
    color: #f56c6c;
}
.el-icon-circle-close:hover {
    color: #a30d0d;
}
</style>
